<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="less/search-style.css">
    <script src="js/flexible.js"></script>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="search-destination">
            <i class="icon-head">箭头</i>
            <p>选择目的地</p>
        </div>

        <div class="search-box">
            <i class="icon-search"></i>
            <span contenteditable="true"> 春节旅游节 </span>
        </div>
    </header>

    <!-- 主体 -->
    <section>
        <aside class="search-travel">
            <div class="search-left_nav skeleton">
                <i>WWW</i>
                <a href="javascript:void(0)">热门</a>
            </div>
            <div class="search-left_nav skeleton">
                <i>EEE</i>
                <a href="javascript:void(0)">国内</a>
            </div>
            <div class="search-left_nav skeleton">
                <i>RRR</i>
                <a href="javascript:void(0)">国外</a>
            </div>
        </aside>
        <aside class="search-right_nav">
            <ul class="search-one">
                <li class="skeleton">
                    <a href="#"><img src="images/img/search0407_01.jpg" alt=""></a>
                    <p>上海迪士尼</p>
                </li>
                <li class="skeleton"><a href="#"><img src="images/img/search0407_02.jpg" alt=""></a>
                    <p>云南</p>
                </li>
                <li class="skeleton"><a href="#"><img src="images/img/search0407_03.jpg" alt=""></a>
                    <p>厦门</p>
                </li>
                <li class="skeleton"><a href="#"><img src="images/img/search0407_04.jpg" alt=""></a>
                    <p>香港</p>
                </li>
                <li class="skeleton"><a href="#"><img src="images/img/search0407_05.jpg" alt=""></a>
                    <p>法国</p>
                </li>
                <li class="skeleton"><a href="#"><img src="images/img/search0407_06.jpg" alt=""></a>
                    <p>泰国</p>
                </li>
                <li class="skeleton"><a href="#"><img src="images/img/search0407_07.jpg" alt=""></a>
                    <p>巴黎</p>
                </li>
                <li class="skeleton"><a href="#"><img src="images/img/search0407_08.jpg" alt=""></a>
                    <p>东京</p>
                </li>
            </ul>

            <ul class="search-two" style="display: none;">
                <li>
                    <a href="#"><img src="images/img/guonei0407_03.jpg" alt=""></a>
                    <p>上海迪士尼</p>
                </li>
                <li class="skeleton"><a href="#"><img src="images/img/guonei0407_05.jpg" alt=""></a>
                    <p>稻城亚丁</p>
                </li>
                <li><a href="#"><img src="images/img/guonei0407_09.jpg" alt=""></a>
                    <p>九寨沟</p>
                </li>
                <li><a href="#"><img src="images/img/guonei0407_10.jpg" alt=""></a>
                    <p>乌镇</p>
                </li>
                <li><a href="#"><img src="images/img/guonei0407_13.jpg" alt=""></a>
                    <p>婺源</p>
                </li>
                <li><a href="#"><img src="images/img/guonei0407_14.jpg" alt=""></a>
                    <p>青海湖</p>
                </li>
                <li><a href="#"><img src="images/img/guonei0407_17.jpg" alt=""></a>
                    <p>香格里拉</p>
                </li>
                <li><a href="#"><img src="images/img/guonei0407_18.jpg" alt=""></a>
                    <p>鼓浪屿</p>
                </li>
            </ul>


            <ul class="search-then" style="display:none">
                <li>
                    <a href="#"><img src="images/img/waiguo0407_03.jpg" alt=""></a>
                    <p>马尔代夫</p>
                </li>
                <li><a href="#"><img src="images/img/waiguo0407_05.jpg" alt=""></a>
                    <p>夏威夷</p>
                </li>
                <li><a href="#"><img src="images/img/waiguo0407_09.jpg" alt=""></a>
                    <p>巴厘岛</p>
                </li>
                <li><a href="#"><img src="images/img/waiguo0407_10.jpg" alt=""></a>
                    <p>曼谷</p>
                </li>
                <li><a href="#"><img src="images/img/waiguo0407_13.jpg" alt=""></a>
                    <p>西班牙</p>
                </li>
                <li><a href="#"><img src="images/img/waiguo0407_14.jpg" alt=""></a>
                    <p>拉斯维加斯</p>
                </li>
                <li><a href="#"><img src="images/img/waiguo0407_17.jpg" alt=""></a>
                    <p>塞班岛</p>
                </li>
                <li><a href="#"><img src="images/img/waiguo0407_18.jpg" alt=""></a>
                    <p>苏梅岛</p>
                </li>
            </ul>
        </aside>

    </section>

    <!-- 尾部 -->
    <!-- <footer>
        <ul>
            <li>
                <i></i>
                <span>首页</span>

            </li>
            <li>
                <i></i>
                <span>目的地</span>

            </li>
            <li>
                <i></i>
                <span>浏览历史</span>

            </li>
            <li>
                <i></i>
                <span>个人</span>

            </li>
          
        </ul>
    </footer> -->

    <!-- 新尾部 -->
    <footer>
        <ul>
            <li>
                <a href="index.html" class="index">
                    <span class="img-index"></span>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="search.html" class="search">
                    <span class="img-search"></span>
                    <p>目的地</p>
                </a>
            </li>
            <li>
                <a href="history.html" class="history">
                    <span class="img-history-active"></span>
                    <p>浏览历史</p>
                </a>
            </li>
            <li>
                <a href="myinfo.html" class="myinfo">
                    <span class="img-myinfo"></span>
                    <p>个人</p>
                </a>
            </li>
        </ul>
    </footer>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $('.icon-head').click(function (e) {
            window.history.back(-1);
            e.prevent();
        })
        
        $('.search-right_nav ul').eq(0).show();
        $('.search-left_nav').click(function () {
            var index = $(this).index();
            // console.log(index);
            $(this).css({ "background": "#ffffff", "border-left": "2px solid #f7c612" });
            $(this).siblings().css({ "background": "none", "border": "none" });
            $('.search-right_nav ul').eq(index).show();
            $('.search-right_nav ul').eq(index).siblings().hide();
        })

        $(function () {
            // console.log('加载完毕');
            setTimeout(() => {
                $('body div').removeClass('skeleton');
                $('body p').removeClass('skeleton');
                $('body ul li').removeClass('skeleton');
            }, 500)
        })
    </script>
</body>

</html>